<template>
  <div>
    <!--     <div class="add"><el-icon>
                <Plus />
            </el-icon> Add another booking</div> -->
    <div class="order">
      <img
        src="https://d1p8ky4d0rkzp4.cloudfront.net/200x200/W14jqwemaEqi8hHtTJHO191021.jpg"
        alt="ooo"
      />
      <div class="detail">
        <p class="name">Activate Game Experience</p>
        <p>Date: {{ date }}</p>
        <p>
          Per Player: x{{ goodNum }} - Rate: {{ custom.symbol + goodPrice }}
        </p>
        <p>Subtotal: {{ custom.symbol + (goodPrice * goodNum).toFixed(2) }}</p>
        <!-- <p class="order-but">
                    <span>Edit booking </span><span style=" color: red;">Remove booking</span>
                </p> -->
        <!--    <div class="line"></div>
        <p>Booking Subtotal: {{ date }}</p> -->
      </div>
    </div>
    <div class="hr"></div>
    <!--   <div class="fl-row">
      <div>Subtotal</div>
      <div>$89.97</div>
    </div>
    <div class="fl-row">
      <div>Subtotal</div>
      <div>$89.97</div>
    </div> -->
    <div class="line-xu"></div>
    <div class="fl-row">
      <div>
        <div>门票</div>
        <div>{{ custom.symbol + (goodPrice * goodNum).toFixed(2) }}</div>
      </div>
      <div>
        <div>定金</div>
        <div>{{ custom.symbol + (goodPrice * goodNum).toFixed(2) }}</div>
      </div>
      <div>
        <div>个税</div>
        <div>{{ custom.symbol + (goodPrice * goodNum).toFixed(2) }}</div>
      </div>
      <div>
        <div>Total</div>
        <div>{{ custom.symbol + (goodPrice * goodNum).toFixed(2) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["goodPrice", "goodNum", "date"]);
const custom = JSON.parse(localStorage.getItem("custom") as any);
</script>

<style scoped lang="scss">
.add {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0 15px;
  line-height: 44px;
  height: 44px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;

  .el-icon {
    margin-right: 4px;
  }
}

.order {
  padding: 30px 15px;
  display: flex;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 50%;
  }

  .detail {
    font-size: 12px;

    .name {
      font-size: 14px;
      font-weight: 600;
    }

    .order-but {
      margin: 15px 0;

      .span {
        margin-right: 30px;
      }
    }

    .line {
      height: 1px;
      border: 1px dashed var(--theme-color);
      margin-bottom: 15px;
    }
  }
}

.hr {
  background-color: var(--theme-color);
  margin: 0 15px;
  height: 1px;
  width: calc(100% - 30px);
}

.fl-row {
  padding: 15px 15px 0 15px;
  font-size: 12px;
  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.line-xu {
  border: 1px dashed var(--theme-color);
  margin: 15px auto 0;
  height: 1px;
  width: calc(100% - 30px);
}
</style>
